<template>
  <!-- 数据报表 -->
  <div class="reports">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>数据报表</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="echarts">
<div id="main" style="width: 800px; height: 500px"></div>
    </div>
    
  </div>
</template>
 
<script>
var echarts = require("echarts");
import { All } from "../../utils/API";
export default {
  name: "reports",
  data() {
    return {
      list: "",
    };
  },
  mounted() {},
  methods: {
    myChart(list) {
      console.log(JSON.stringify(list.yAxis));
      var myChart = echarts.init(document.getElementById("main"));
      var option = {
        title: {
          text: "用户来源",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#E9EEF3",
            },
          },
        },
        legend: {
          data: ["华东", "华南", "西部", "其他"],
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: list.xAxis,
        yAxis: [
          {
            type: "value",
          },
        ],
        series: list.series,
      };

      option && myChart.setOption(option);
    },
  },
  async created() {
    const res = await All(
      "/reports/type/1",
      { token: this.$store.state.token },
      "GET"
    );
    this.list = res.data.data;
    this.myChart(this.list);
  },
};
</script>
 
<style lang = "scss" scoped>
.reports {
  width: 100%;
  height: 100%;
  background-color: #eaedf1;
  .el-breadcrumb {
    line-height: 50px;
    text-indent: 1em;
  }
  .echarts{
      width: 100%;
      margin-left: 40px;
      box-sizing: border-box;
      padding: 20px;
      background-color: white;
  }
}
</style>